<!--考勤页面-->
<template>
  <div class="app-page">
    <v-card>
      <v-container fluid grid-list-sm>
        <v-layout row wrap>
          <v-flex xs12>
            <classManage
              @handleClass="handleClass"
              :classList="classList"
              :handleClassIndex="handleClassIndex"
            ></classManage>
          </v-flex>

          <!-- 考勤班级详情 -->
          <v-flex xs12>
            <v-card>
              <v-card-title primary class="title blue--text">{{selectRoom+"("+selectClass+")"}}</v-card-title>
              <v-container fluid grid-list-xs>
                <v-layout row wrap>
                  <v-flex d-flex xs12>社会服务工程系-->幼儿教育专业-->16年级169902班</v-flex>
                  <div class="wy-divider"></div>
                  <v-flex d-flex xs12>班主任：马辉</v-flex>
                  <v-flex d-flex xs12>手机号：18013907675</v-flex>
                  <div class="wy-divider"></div>
                  <v-flex d-flex xs12>学生人数：30人</v-flex>
                </v-layout>
              </v-container>
              <!-- <v-card-actions>
                <v-btn color="light-blue">Listen now</v-btn>
              </v-card-actions>-->
            </v-card>
          </v-flex>
          <!-- 考勤类型 -->
          <v-flex xs12>
            <v-card>
              <v-card-title primary class="title blue--text">进行考勤</v-card-title>
              <v-layout row wrap class="text-xs-center">
                <v-flex xs8 offset-xs2>
                  <v-btn block color="info" large @click="toSrc('attendHandle','早自习考勤')">早自习</v-btn>
                </v-flex>
                <v-flex xs8 offset-xs2>
                  <v-btn block color="info" large @click="toSrc('attendHandle','晚自习考勤')">晚自习</v-btn>
                </v-flex>
                <v-flex xs8 offset-xs2>
                  <v-btn block color="info" large @click="toSrc('attendClass','教学考勤')">教学</v-btn>
                </v-flex>
              </v-layout>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </div>
</template>
<script>
import classManage from "../../components/layouts/classManage.vue";
export default {
  components: {
    classManage
  },
  data() {
    return {
      selectRoom: "",
      selectClass: "",
      classList: [
        {
          floor: "7#",
          room: "301-302",
          class: "2018001班"
        },
        {
          floor: "7#",
          room: "303-304",
          class: "2018002班"
        },
        {
          floor: "7#",
          room: "305-306",
          class: "2018003班"
        }
      ],
      handleClassIndex: 0
    };
  },
  created() {
    //这个值还是通过监听获得
    this.selectRoom = this.classList[0].floor + this.classList[0].room;
    this.selectClass = this.classList[0].class;
  },
  methods: {
    toSrc(src, name) {
      this.$router.push({
        path: `/outall/${src}`,
        query: {
          head: name,
          selectClass: this.selectClass,
          selectRoom: this.selectRoom
        }
      });
    },
    handleClass(index) {
      this.handleClassIndex = index;
      this.selectRoom = this.classList[index].floor + this.classList[index].room;
      this.selectClass = this.classList[index].class;
    }
  }
};
</script>
<style lang='less' scoped>
@import "~@/common/css/appPage.less";
</style>